<template>
  <div class="tab-pane-cover">
    <!-- 已选择组件 -->
    <div class="tab-box current-comp">
      <span class="title" v-if="current !== null">
        {{
          $srv.getI18nByPath('oSetupPanel.SetupAttrCurrent.componentsselected')
        }}

        <div
          class="status-btn"
          v-if="$srv.getx(panelItems, 'mainFun.isShow', false)"
          @click="setCompStatus"
          :style="{
            color:
              current.config.status == 'main'
                ? 'var(--default-hover-font-color)'
                : '#bbb'
          }"
        >
          <span class="hoverable">
            <Icon type="ios-checkmark-circle" />
          </span>
          <span>
            {{
              $srv.getI18nByPath('oSetupPanel.SetupAttrCurrent.mainfunction')
            }}
          </span>
        </div></span
      >
      <div class="current" v-if="current !== null">
        {{
          $srv.getI18nByPath('system.components.' + current.name.toLowerCase())
        }}
        <Icon type="ios-close" @click="onClose" />
      </div>
      <span class="empty" v-else>
        {{
          $srv.getI18nByPath(
            'oSetupPanel.SetupAttrCurrent.nocomponentsselected'
          )
        }}
      </span>
    </div>
    <div class="divider-empty"></div>
    <Divider />
    <!-- 历史组件 -->
    <div class="tab-box stored-comp" v-if="stored.length > 0">
      <div class="divider-empty-thin"></div>
      <span class="title">
        {{
          $srv.getI18nByPath(
            'oSetupPanel.SetupAttrCurrent.selecthistorycomponent'
          )
        }}
      </span>
      <div class="list">
        <div class="stored-comp-cell" v-for="(item, idx) of stored" :key="idx">
          <span>{{
            item.config.name !== ''
              ? item.config.name
              : $srv.getI18nByPath(
                  'system.components.' + item.name.toLowerCase()
                )
          }}</span>
          <div
            class="stored-comp-cell draggable"
            :id="'stored_' + item.name + '_' + idx"
            draggable="true"
            @dragstart="compoDragStart"
          >
            <span>{{
              item.config.name != ''
                ? item.config.name
                : $srv.getI18nByPath(
                    'system.components.' + item.name.toLowerCase()
                  )
            }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { N_oSetupPanel } from '@/types';
import { I_command, T_srv, Tsrv, ifs, vue } from './config';

@T_srv.comp
export default class SetupAttrCurrent extends vue {
  @T_srv.prop() isChange!: boolean; // 配置是否改变

  private current: any = null;

  // 当前配置
  private stored: any = [];

  // 储存的历史配置
  /* 父组件compBoxInfo */
  @T_srv.prop({
    required: false,
    type: Object,
    default: null
  })
  compBoxInfo: ifs.I_compBoxInfo;

  /* 组件名 */
  private G_compName: string = 'SetupAttrCurrent';

  /* 组件箱信息对象 */
  private GT_compBoxInfo: ifs.I_compBoxInfo;

  /* 组件箱对象 */
  private GT_compBox: ifs.I_compBox;

  /* 组件箱识别ID */
  private G_compID: string;

  private GT_command: I_command = null;

  // 是否开启某些组件
  private panelItems: any = {};

  private oSetupPanel: N_oSetupPanel.oSetupPanel = null;

  @T_srv.watch('isChange')
  private componentChanged(val: boolean) {
    this.current = this.GT_command.Tsetup.component.current;
    this.stored = this.GT_command.Tsetup.configStore.stored;
    this.releaseFromConfig();
  }

  /**
   * 获取当前组件的类
   */
  get currentCompClass() {
    return this.GT_command.Tsetup.getCompClass(
      this.GT_command.Tsetup?.component?.current?.name
    );
  }

  created() {
    // 如果父组件没有传参，那就产生一个
    this.GT_compBoxInfo = Tsrv.getCompInfo(this.compBoxInfo);
    this.G_compID = this.GT_compBoxInfo.compID;
    this.GT_compBox = this.GT_compBoxInfo.TcompBox;
    this.GT_command = this.GT_compBox.getCompMergeName(
      this.G_compID,
      'oSetupPanelCMD'
    );
    this.oSetupPanel = this.GT_compBox.getCompMergeName(
      this.G_compID,
      'oSetupPanel'
    );
  }

  mounted() {
    this.$emit('compBoxInfo', this.GT_compBoxInfo);
    this.GT_compBox.addCompMergeName(this.G_compID, this.G_compName, this);
  }

  destroyed() {
    /* 注册组件销毁 */
    this.GT_compBox.removeCompMergeName(this.G_compID, this.G_compName);

    /* 如果父组件传入的compBoxInfo则删除本文件产生的引用,反之是本组件产生的ID统一删除 */
    if (Tsrv.utils.isEmpty(this.compBoxInfo)) {
      this.GT_compBox.removeCompsWithCompID(this.G_compID);
    } else {
      this.GT_compBox.removeCompsMergeName(this.G_compID, [
        `'${this.G_compName}'`
      ]);
    }
    /* 如果是动态组件可能会关闭全局compBox */
    // this.GT_compBox = null
  }

  // 加载配置
  private releaseFromConfig() {
    if (this.currentCompClass) {
      this.panelItems = this.currentCompClass.GetCompPanelConf().attrCurrent;
    }
  }

  private setCompStatus() {
    if (!Tsrv.getx(this.panelItems, 'mainFun.disabled', true)) {
      if (this.current.config['status'] === 'main') {
        this.$emit('set-main-component', false);
      } else {
        this.$emit('set-main-component', true);
      }
    }
  }

  private compoDragStart(e: any) {
    e.dataTransfer.setData('compname_moduleid', e.target.id);
  }

  public onClose() {
    this.oSetupPanel.setupResetCell();
  }
}
</script>
<style scoped lang="scss">
.stored-comp {
  .stored-comp-cell {
    background-color: #e5e5e5;
    height: 75px;
    pointer-events: none;
    border-radius: 5px;
    cursor: grab;
    text-align: center;
    line-height: 75px;
    color: #555;
    position: relative;
    margin: 5px 0 20px;
    span {
      pointer-events: none;
      user-select: none;
    }
    .draggable {
      position: absolute;
      width: 100%;
      height: 100%;
      margin: 0;
      pointer-events: auto;
      border-radius: 5px;
      overflow: hidden;
      top: 0;
      left: 0;
    }
  }
}
.status-btn {
  position: absolute;
  right: 2px;
  top: 7px;
  height: 24px;
  color: #bbb;
  line-height: 24px;
  // cursor: pointer;
  .ivu-icon {
    font-size: 14px;
    margin-right: 2px;
    transition: all 0s;
    pointer-events: none;
  }
  .hoverable {
    cursor: pointer;
  }
  span {
    font-size: 12px;
    transition: all 0s;
  }
}
.current-comp {
  .current {
    text-align: center;
    font-weight: bold;
    padding-right: 40px;
    color: #fff;
    line-height: 40px;
    display: block;
    width: 100%;
    height: 40px;
    border: 1px solid #e7e7e7;
    border-radius: 3px;
    background-color: var(--default-hover-font-color);
    position: relative;
    .ivu-icon {
      position: absolute;
      right: 8px;
      font-size: 24px;
      font-weight: bold;
      top: 8px;
      cursor: pointer;
      &:hover {
        color: #fff;
      }
    }
  }
}
</style>
